@extends('layouts.app', ['activePage' => 'post', 'titlePage' => '晒图详情'])
{{--@dd($post)--}}
@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card mb-3">
            <div class="card-header">
              <div class="row">
                @foreach($post->photos as $photo)
                  <div class="col-md-3">
                    <img src="{{ $photo }}" style="width: auto; max-width: 12rem; height: auto; max-height: 12rem; ">
                  </div>
                @endforeach
              </div>
            </div>
            <div class="card-body">
              <h4 class="card-title"><a
                  href="{{ route('user.index', [$post->user_id]) }}">{{ $post->user->username }}</a></h4>
              <p class="card-text">{{ $post->content }}</p>
              <p class="card-text"><small class="text-muted">{{ $post->created_at->toDateTimeString() }}</small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">评论</h4>
            </div>
            <div class="card-body">
              @if (session('status'))
                <div class="row">
                  <div class="col-sm-12">
                    <div class="alert alert-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <i class="material-icons">close</i>
                      </button>
                      <span>{{ session('status') }}</span>
                    </div>
                  </div>
                </div>
              @endif
              {{--              <div class="row justify-content-between">--}}
              {{--                <div class="col-md-auto mr-auto">--}}
              {{--                  <ul class="nav">--}}
              {{--                    <li class="nav-item">--}}
              {{--                      <a class="nav-link {{ is_null(request()->type)?:'active' }}" href="?type">全部({{ $countAll }})</a>--}}
              {{--                    </li>--}}
              {{--                    <li class="nav-item {{ (request()->type !== 1)?:'active' }}">--}}
              {{--                      <a class="nav-link" href="?type=1">正常({{ $countStatus1 }})</a>--}}
              {{--                    </li>--}}
              {{--                    <li class="nav-item {{ (request()->type !== 0)?:'active' }}">--}}
              {{--                      <a class="nav-link" href="?type=0">屏蔽({{ $countStatus0 }})</a>--}}
              {{--                    </li>--}}
              {{--                  </ul>--}}
              {{--                </div>--}}
              {{--                <div class="col-auto">--}}
              {{--                  <form class="navbar-form navbar-search" method="get">--}}
              {{--                    <div class="input-group no-border">--}}
              {{--                      <input type="text" name="search" class="form-control" placeholder="查找...">--}}
              {{--                      <button type="submit" class="btn btn-white btn-round btn-just-icon">--}}
              {{--                        <i class="material-icons">search</i>--}}
              {{--                        <div class="ripple-container"></div>--}}
              {{--                      </button>--}}
              {{--                    </div>--}}
              {{--                  </form>--}}
              {{--                </div>--}}
              {{--              </div>--}}
              <div class="table-responsive">
                <table class="table">
                  <thead class="text-primary">
                  <th class="text-center">#</th>
                  <th class="text-center">内容</th>
                  <th>发布者</th>
                  <th>发布时间</th>
                  <th class="text-center">状态</th>
                  <th class="text-right">动作</th>
                  </thead>
                  <tbody>
                  @if($post->comments_count==0)
                    <tr>
                      <td class="text-center" colspan="10">没有更多数据</td>
                    </tr>
                  @endif
                  @foreach($post->comments as $comment)
                    <tr id="comment-{{ $comment->id }}">
                      <td class="text-center">
                        {{ $loop->iteration }}
                      </td>
                      <td style="max-width: 550px">
                        {{ $comment->content }}
                      </td>
                      <td>
                        <a href="{{ route('user.index', [$comment->user_id]) }}">{{ $comment->user->username }}</a>
                      </td>
                      <td class="table-col-created-at">
                        {{ $comment->created_at->toDateTimeString() }}
                      </td>
                      <td class="text-center table-col-status">
                        @switch($comment->status)
                          @case(0)
                          <span class="badge badge-default">屏蔽</span>@break
                          @case(1)
                          <span class="badge badge-success">正常</span>@break
                          @default
                          未知状态
                        @endswitch
                      </td>
                      <td class="td-actions text-right">
                        <a rel="tooltip" class="btn btn-success btn-link btn-comment-status" href="javascript:"
                           data-comment-status={{ $comment->status }} data-comment-id={{ $comment->id }}>
                          {{ ($comment->status === 0)?'解除屏蔽':'屏蔽' }}
                          <div class="ripple-container"></div>
                        </a>
                      </td>
                    </tr>
                  @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            {{--            <div class="card-footer justify-content-end">--}}
            {{--              <div class="col-auto">--}}
            {{--                {{ $posts->links() }}--}}
            {{--              </div>--}}
            {{--            </div>--}}
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
      $('.btn-comment-status').on('click', function () {
          const post_id = {{ $post->id }};
          let comment_id = $(this).attr('data-comment-id');
          let status = $(this).attr('data-comment-status');
          axios.patch(`/post/${post_id}/comment/${comment_id}/status`, {
              status: status > 0 ? 0 : 1
          }).then(res => {
              if (res.status === 200)
                  return res.data;
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          }).then(data => {
              console.log(data);
              let s = null;
              switch (data.status) {
                  case 1:
                      s = '<span class="badge badge-success">正常</span>';
                      $(`#comment-${comment_id} .btn-comment-status`).text('屏蔽');
                      break;
                  case 0:
                      s = '<span class="badge badge-default">屏蔽</span>';
                      $(`#comment-${comment_id} .btn-comment-status`).text('解除屏蔽');
                      break;
                  default:
                      console.log('Unknown status result: ' + s);
              }
              $(`#comment-${comment_id} .table-col-status`).html(s);
              $(this).attr('data-comment-status', data.status);
          }).catch(e => console.log(e));
      });
  </script>
@endpush
